<%@ page pageEncoding="UTF-8" %>
<%@ include file="common/global.jsp" %>

<head>
    <%@ include file="common/meta.jsp" %>
    <title><f:message key="common.title"/> - <f:message key="menu.components.charts"/></title>
    <%@ include file="common/css.jsp" %>
    <link rel="stylesheet" href="${BASE}/www/css/ui-lightness/jquery-ui-1.8.21.custom.css">
    <link rel="stylesheet" href="${BASE}/www/js/plugins/cirque/cirque.css">
    <style>

        .cirque-stats {
            text-align: center;
        }

        .cirque-stats .cirque-container {
            margin-bottom: 3em;
            margin-right: 2em;
            margin-left: 2em;
        }

    </style>
</head>

<body>

<div id="wrapper">


<%@ include file="common/topbar.jsp" %>
<%@ include file="common/header.jsp" %>

    <div id="masthead">

        <div class="container">

            <div class="masthead-pad">

                <div class="masthead-text">
                    <h2>Charts</h2>
                    <p>You are currently working on 4 projects, with 23 total tasks.</p>
                </div> <!-- /.masthead-text -->

            </div>

        </div> <!-- /.container -->

    </div> <!-- /#masthead -->
    <div id="content">

        <div class="container">

            <div class="row">

                <div class="span6">

                    <h3>Vertical Chart</h3>

                    <hr />

                    <div id="vertical-chart" class="chart-holder"></div> <!-- /#vertical-chart -->

                </div> <!-- /.span6 -->

                <div class="span6">

                    <h3>Cirque Stats</h3>

                    <hr />

                    <div class="cirque-stats">
                        <div class="ui-cirque" data-value="2875" data-total="3245" data-arc-color="#4074AA" data-label="ratio"></div>
                        <div class="ui-cirque" data-value="13" data-arc-color="#BBBBBB"></div>
                        <div class="ui-cirque" data-value="63" data-total="225" data-arc-color="#2790B0" data-label="ratio"></div>
                        <div class="ui-cirque" data-value="40" data-arc-color="#999999"></div>
                        <div class="ui-cirque" data-value="72" data-arc-color="#222222" data-label="ratio"></div>
                        <div class="ui-cirque" data-value="57" data-arc-color="#94BA65"></div>
                    </div> <!-- /.cirque-stats -->

                </div> <!-- /.span6 -->

            </div> <!-- /row -->

            <div class="row">

                <div class="span6">

                    <h3>Line Chart</h3>

                    <hr />

                    <div id="line-chart" class="chart-holder"></div> <!-- /#line-chart -->

                </div> <!-- /.span6 -->

                <div class="span6">

                    <h3>Donut Chart</h3>

                    <hr />

                    <div id="donut-chart" class="chart-holder"></div> <!-- /#donut-chart -->

                </div> <!-- /.span6 -->

            </div> <!-- /row -->

            <div class="row">

                <div class="span6">

                    <h3>Pie Chart</h3>

                    <hr />

                    <div id="pie-chart" class="chart-holder"></div> <!-- /#pie-chart -->

                </div> <!-- /.span6 -->

                <div class="span6">

                    <h3>Horizontal Chart</h3>

                    <hr />

                    <div id="horizontal-chart" class="chart-holder"></div> <!-- /#horizontal-chart -->

                </div> <!-- /.span6 -->

            </div> <!-- /row -->



        </div> <!-- /container -->

    </div> <!-- /#content -->

</div> <!-- /#wrapper -->

<%@ include file="common/footer.jsp" %>
<%@ include file="common/js.jsp" %>

<script src="${BASE}/www/js/Charts.js"></script>
<script src="${BASE}/www/js/plugins/excanvas/excanvas.min.js"></script>
<script src="${BASE}/www/js/plugins/cirque/cirque.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.orderBars.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="${BASE}/www/js/plugins/flot/jquery.flot.resize.js"></script>


<script src="${BASE}/www/js/demos/charts/vertical.js"></script>
<script src="${BASE}/www/js/demos/charts/pie.js"></script>
<script src="${BASE}/www/js/demos/charts/donut.js"></script>
<script src="${BASE}/www/js/demos/charts/line.js"></script>
<script src="${BASE}/www/js/demos/charts/horizontal.js"></script>


<script>
    $(function () {
        Theme.init ();
        $("#nav2").addClass("active").sibling.removeClass("active");
    });
</script>

</body>
</html>